<template>
  <div>
    <t-card>
      <t-form :data="formData" layout="inline">
        <t-form-item label="用户名" name="username">
          <t-input v-model="formData.username" placeholder="请输入用户名" />
        </t-form-item>
        <t-form-item label="角色" name="role">
          <t-select v-model="formData.role" placeholder="请选择角色" clearable>
            <t-option v-for="item in UserRole" :key="item" :label="userRoleDict[item]" :value="item" />
          </t-select>
        </t-form-item>
        <t-button :loading="dataLoading" @click="handleSearchClick">
          查询
        </t-button>
      </t-form>
      <t-divider />

      <t-button @click="handleAddUserClick">
        添加用户
      </t-button>
      <!-- @vue-expect-error -->
      <t-table :data="tableData" :columns="tableColumns" row-key="id" cell-empty-content="-" :pagination="pagination" :loading="dataLoading" @page-change="handlePageChange" />
    </t-card>
    <user-form-dialog v-model:visible="userFormDialogVisible" :data="userFormDialogData" @success="handleSuccess" />
  </div>
</template>
<script setup lang="ts">
import type { PageInfo, PaginationProps, TableProps } from 'tdesign-vue-next'
import { reactive, ref } from 'vue'

import type { UserInfoRes } from '@/api/model/user'
import { UserRole } from '@/api/model/user'
import { getUserPageList } from '@/api/user'
import { userRoleDict } from '@/utils/dict/user'

import type { UserFormDialogData } from './component/UserFormDialog.vue'
import UserFormDialog from './component/UserFormDialog.vue'

type UserTableData = UserInfoRes

const formData = reactive({
  username: '',
  role: '',
})
const pagination = ref<PaginationProps>({
  current: 1,
  pageSize: 10,
  total: 0,
})

const tableData = ref<UserTableData[]>([])
const tableColumns: TableProps<UserTableData>['columns'] = [
  {
    colKey: 'id',
    title: 'ID',
  },
  {
    colKey: 'userName',
    title: '用户名',
  },
  {
    colKey: 'userRole',
    title: '角色',
    cell: (_, { row }) => userRoleDict[row.userRole],
  },
  {
    colKey: 'createDate',
    title: '创建时间',
  },
  {
    colKey: 'updateDate',
    title: '更新时间',
  },
  {
    colKey: 'op',
    title: '操作',
  },
]
const dataLoading = ref(false)
function fetchData() {
  dataLoading.value = true
  getUserPageList(pagination.value.current, pagination.value.pageSize).then((res) => {
    tableData.value = res.data
    pagination.value.total = res.total
  }).finally(() => {
    dataLoading.value = false
  })
}
fetchData()
function handlePageChange(pageInfo: PageInfo) {
  pagination.value.current = pageInfo.current
  pagination.value.pageSize = pageInfo.pageSize
  fetchData()
}
function handleSearchClick() {
  pagination.value.current = 1
  fetchData()
}

const userFormDialogVisible = ref(false)
const userFormDialogData = reactive<UserFormDialogData>({
  userName: '',
  password: '',
  userRole: UserRole.COMPANY_ADMIN,
  companyId: '',
})
function handleAddUserClick() {
  userFormDialogVisible.value = true
}
function handleSuccess() {
  pagination.value.current = 1
  fetchData()
}
</script>
<style scoped>

</style>
